<template>
  <div class="categoryContainer">
    <!-- 头部搜索框 -->
    <div class="header">
      <van-search @click="toSearch" placeholder="请输入搜索关键词" />
    </div>

    <div class="main">
      <div class="left">
        <div class="leftSidebar">
          <div
            :class="currentIndex === c1.id && 'active'" 
            @click="onChange(c1.id)"
            v-for="(c1, index) in categoryList.categoryL1List"
            :key="c1.id"
            class="leftItem">
            {{c1.name}}
          </div>
        </div>
      </div>

      <div class="right">
        <div class="rightMain">
          <van-swipe class="rightSwipe">
            <van-swipe-item
              class="swiprItem"
              v-for="(ban, index) in banList"
              :key="ban.id"
            >
              <img class="itemImg" :src="ban.picUrl" />
            </van-swipe-item>
          </van-swipe>
        </div>
        <div class="subCateList">
          <van-grid class="subCate" :border="false" :column-num="3">
            <van-grid-item
              class="subCateItem"
              @click="categoryL2(c2.id)"
              v-for="(c2, index) in categoryList.categoryL2List"
              :key="c2.id"
            >
              <van-image class="subCateImg" :src="c2.bannerUrl" />
              <div class="subCateName">{{ c2.name }}</div>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: 'Category',
  data() {
    return {
      currentIndex:11,
      currentIndex2:''
    };
  },
  mounted() {
    this.getCategoryList();
  },
  methods: {
    getCategoryList() {
      this.$store.dispatch('getCategoryList',this.currentIndex,this.currentIndex2);
    },
    //点击一级分类切换二级分类
    onChange(id){
      this.currentIndex = id
      this.getCategoryList()
      // console.log('yiji',id);
    },
    //获取二级分类id
    categoryL2(id2){
      this.currentIndex2=id2,
      // console.log('erji',id2);
      this.$router.push({
        name:'shop-list',
        query:{
          currentIndex:this.currentIndex,
          currentIndex2:this.currentIndex2
        }
      })
    },
    toSearch(){
      this.$router.push('/search')
    }
  },
  //分类数据
  computed: {
    ...mapState({
      categoryList: state => state.category.categoryList,

    }),
    //获取轮播图图片
    banList() {
      return (this.categoryList.currentCategory || {}).bannerList || [];
    },
    // 计算当前点击的一级分类
			currentCategory1(){
				return this.categoryList.categoryL1List[this.currentIndex] || {}
			},
      // 计算当前点击的二级分类
      currentCategory2(){
        return this.categoryList.categoryL2List[this.currentIndex2] || {}
      }
  },
};
</script>

<style lang="less" scoped>
.categoryContainer {
  height: 100%;
  width: 100%;
  .header {
    height: 60px;
    border-bottom: 1px solid #aaa;
    box-sizing: border-box;
  }
  .main {
    display: flex;
    height: 100%;
    .left {
      .leftSidebar {
        width: 81px;
        padding: 10px 0;
        .leftItem {
          width: 100%;
          height: 40px;
          text-align: center;
          line-height: 40px;
          font-size: 14px;
          font-size: 14px;
          &.active{
            color: red;
            border-left: 1px solid red;
          }
        }
      }
    }
    .right {
      border-left: 1px solid rgb(156, 22, 22);
      box-sizing: border-box;
      padding: 15px;
      .rightMain {
        /deep/.rightSwipe {
          width: 264px;
          .swiprItem {
            .itemImg {
              width: 264px;
              height: 96px;
            }
          }
        }
      }
      .subCateList {
        .subCate {
          .subCateItem {
            .subCateImg {
              width: 72px;
              height: 72px;
            }
            .subCateName {
              width: 72px;
              height: 36px;
              text-align: center;
              font-size: 12px;
              color: #333333;
            }
          }
        }
      }
    }
  }
}
</style>
x